<list-cluster [resources]="clusterList"></list-cluster>
<div class="row" style="padding-left: 5%">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="row flex flex-items-xs-between flex-items-xs-top" style="flex-wrap: nowrap;justify-content: flex-start;padding-left: 15px; padding-right: 15px;">
      <h2 class="header-title" style="margin-top: 12px;white-space: nowrap;">项目概览</h2>
    </div>
    <form>
      <section class="form-block form-box">
        <div class="row group">
          <div class="col-sm-2">
            项目名
          </div>
          <div class="col-sm-10">
            {{app.name}}
          </div>
        </div>
        <div class="row group">
          <div class="col-sm-2">
            创建人
          </div>
          <div class="col-sm-10">
            {{app.user}}
          </div>
        </div>
        <div class="row group">
          <div class="col-sm-2">
            创建时间
          </div>
          <div class="col-sm-10">
            {{app.createTime | date:'yyyy-MM-dd HH:mm:ss'}}
          </div>
        </div>
        <div class="row group">
          <div class="col-sm-2">
            说明
          </div>
          <div class="col-sm-10">
            {{app.description}}
          </div>
        </div>
        <div class="row group">
          <div class="col-sm-2">
            <div class="flex" style="height:70px;flex-direction: column; justify-content:space-around;">
              <span>CPU使用</span>
              <span>内存使用</span>
            </div>
          </div>
          <div class="col-sm-10">
            <ng-container *ngFor="let cluster of clusters; let i = index">
              <div class="statistic-column-block" style="text-align: left">
                <div>
                  <div class="statistic-wrapper">
                    <span class="statistic-data" style="font-size: 14px">{{cluster}} <label class="resource-label">{{resources[cluster].usage.cpu}}</label>
                      核</span>
                  </div>
                </div>
                <div>
                  <div class="statistic-wrapper">
                    <span class="statistic-data" style="font-size: 14px">{{cluster}}
                      <label class="resource-label">{{resources[cluster].usage.memory}}</label> G</span>
                  </div>
                </div>
              </div>

            </ng-container>
          </div>
        </div>
        <div class="row group">
          <wayne-card class="wayne-card">
            <div class="card-title">部署</div>
            <p class="card-text">
              <a href="javascript:void(0)" (click)="goToLink('deployment')" class="nav-link">{{resourceCount(deployment)}}</a>
            </p>
          </wayne-card>
          <wayne-card class="wayne-card">
            <div class="card-title">状态副本集</div>
            <p class="card-text">
              <a href="javascript:void(0)" (click)="goToLink('statefulset')" class="nav-link">{{resourceCount(statefulSet)}}</a>
            </p>
          </wayne-card>
          <wayne-card class="wayne-card">
            <div class="card-title">守护进程集</div>
            <p class="card-text">
              <a href="javascript:void(0)" (click)="goToLink('daemonset')" class="nav-link">{{resourceCount(daemonSet)}}</a>
            </p>
          </wayne-card>
          <wayne-card class="wayne-card">
            <div class="card-title">计划任务</div>
            <p class="card-text">
              <a href="javascript:void(0)" (click)="goToLink('cronjob')" class="nav-link">{{resourceCount(cronJob)}}</a>
            </p>
          </wayne-card>
        </div>
        <div class="row group">
          <wayne-card class="wayne-card">
            <div class="card-title">负载均衡</div>
            <p class="card-text">
              <a href="javascript:void(0)" (click)="goToLink('service')" class="nav-link">{{resourceCount(service)}}</a>
            </p>
          </wayne-card>
          <wayne-card class="wayne-card">
            <div class="card-title">配置集</div>
            <p class="card-text">
              <a href="javascript:void(0)" (click)="goToLink('configmap')" class="nav-link">{{resourceCount(configMap)}}</a>
            </p>
          </wayne-card>
          <wayne-card class="wayne-card">
            <div class="card-title">加密字典</div>
            <p class="card-text">
              <a href="javascript:void(0)" (click)="goToLink('secret')" class="nav-link">{{resourceCount(secret)}}</a>
            </p>
          </wayne-card>
          <wayne-card class="wayne-card">
            <div class="card-title">PVC</div>
            <p class="card-text">
              <a href="javascript:void(0)" (click)="goToLink('persistentvolumeclaim')" class="nav-link">{{resourceCount(persistentVolumeClaim)}}</a>
            </p>
          </wayne-card>
        </div>
      </section>
    </form>
  </div>
</div>
